{% extends "base.html" %}

{% load staticfiles %}


{% block content %}

{% if rooms_list %}

<div class="container">
	<div class="row clearfix">
		<div class="col-md-1 column">
		</div>
		<div class="col-md-9 column">
			<table class="table table-hover">
				<thead>
					<tr  class="active">
						<th>
							Room #
						</th>
						<th>
							Hotel Name
						</th>
						<th>
							Room Type
						</th>
						<th>
							Night Price
						</th>
						<th>
							City
						</th>
						<th>
							Country
						</th>
						<th>
							Reserve
						</th>
						<th>
							View Hotel
						</th>
					</tr>
				</thead>
				<tbody>

					{% for room in rooms_list %}
					<tr>
						<td>
							{{ room.room_no }}
						</td>
						<td>
							{{ room.name }}
						</td>
						<td>
							{{ room.room_type }}
						</td>
						<td>
							{{ room.night_price }}
						</td>
						<td>
							{{ room.city }}
						</td>
						<td>
							{{ room.country }}
						</td>
						<td>

							<input type='button' id='{{ room.room_no }}' name='{{ room.hotel_id_id }}' value='Reserve' onclick='reserve(this)'>

						</td>
						<td>
							<a href="/rates/ratehotel/{{ room.hotel_id_id}}/" target="_blank">Link</a>
						</td>
						
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
		<div class="col-md-2 column">
		</div>
	</div>
</div>
{% endif %}


<script>
	var ajaxRequest;

	function reserve($button)
	{
		if(window.XMLHttpRequest)
        	ajaxRequest = new XMLHttpRequest();
        else
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

        ajaxRequest.onreadystatechange = function(){
                    if(ajaxRequest.readyState==4){
                        document.getElementById($button.id).disabled = true;
                    }
                }
                
                ajaxRequest.open("GET", "/hotels/reserve/"+ $button.id +"/"+ $button.name +"/{{ chkin_date }}/{{ chkout_date }}");

                ajaxRequest.send();

	}


</script>


{% endblock %}